
import * as echarts from 'echarts'
import _ from 'lodash';
export const getOption = (datas) => {
    datas = _.orderBy(datas, 'value', 'desc')
    let arrName = datas.map(d => d.name);
    let arrValue = datas.map(d => d.value);
    let sumValue = _.sum(arrValue);
    let objData = array2obj(datas, "name");
    let optionData = getData(datas)


    // data = _.orderBy(data, 'value', 'desc')
    // let arrName = data.map(d => d.cztxl);
    // let arrValue = data.map(d => d.count);
    // let sumValue = _.sum(arrValue);
    // let objData = array2obj(data, "name");
    // let optionData = getData(data)

    function array2obj(array, key) {
        var resObj = {};
        for (var i = 0; i < array.length; i++) {
            resObj[array[i][key]] = array[i];
        }
        return resObj;
    }

    function getData(data) {
        var res = {
            series: [],
            yAxis: []
        };
        for (let i = 0; i < data.length; i++) {
            // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
            res.series.push({
                name: '',
                type: 'pie',
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [75 - i * 18 + '%', 67 - i * 18 + '%'],
                center: ["30%", "55%"],
                label: {
                    show: false
                },
                itemStyle: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 5,
                },
                data: [{
                    value: data[i].value * 0.75,
                    name: data[i].name
                }, {
                    value: sumValue - data[i].value * 0.75,
                    name: '',
                    itemStyle: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0
                    },
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false
                }]
            });
            res.series.push({
                name: '',
                type: 'pie',
                silent: true,
                z: 1,
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [75 - i * 18 + '%', 67 - i * 18 + '%'],
                center: ["30%", "55%"],
                label: {
                    show: false
                },
                itemStyle: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 5,
                },
                data: [{
                    value: sumValue * 0.75,
                    itemStyle: {
                        color: "rgb(3, 31, 62)",
                        borderWidth: 0
                    },
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false
                }, {
                    value: sumValue * 0.25,
                    name: '',
                    itemStyle: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0
                    },
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false
                }]
            });
            res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
        }
        return res;
    }

    const colors = ['rgb(24, 183, 142)', 'rgb(1, 179, 238)', 'rgb(22, 75, 205)', 'rgb(52, 52, 176)'];

    return {
        legend: {
            show: true,
            icon: "circle",
            top: "center",
            right: 0,
            data: arrName,
            width: 50,
            padding: [0, 5],
            itemGap: 25,
            formatter: function (name) {
                const index = arrName.findIndex(n => n === name);
                return "{title|" + name + "} {value" + index + "|" + (objData[name].value) + "}  {title|处}"
            },

            textStyle: {
                rich: {
                    title: {
                        fontSize: 16,
                        lineHeight: 15,
                        color: "#fff"
                    },
                    value0: {
                        fontSize: 18,
                        lineHeight: 20,
                        fontWeight: 'bold',
                        color: colors[0]
                    },
                    value1: {
                        fontSize: 18,
                        lineHeight: 20,
                        fontWeight: 'bold',
                        color: colors[1]
                    },
                    value2: {
                        fontSize: 18,
                        lineHeight: 20,
                        fontWeight: 'bold',
                        color: colors[2]
                    }
                }
            },
        },
        tooltip: {
            show: true,
            trigger: "item",
            formatter: "{a}<br>{b}:{c}({d}%)"
        },
        color: colors,
        grid: {
            top: '16%',
            bottom: '53%',
            left: "30%",
            containLabel: false
        },
        yAxis: [{
            type: 'category',
            inverse: true,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },

            axisLabel: {
                interval: 0,
                inside: true,
                textStyle: {
                    color: "#fff",
                    fontSize: 16,
                },
                show: true
            },
            data: optionData.yAxis
        }],
        xAxis: [{
            show: false
        }],
        series: optionData.series
    };
}
